<template>
    <div>
      <h2>修改</h2>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>类型</td>
            <td>
              <select v-model="form.leixing">
                <option value="">请选择</option>
                <option>7折优惠</option>
                <option>打骨折</option>
                <option>优惠个蛋</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>标题</td>
            <td>
              <input type="text" v-model="form.biaoti" />
            </td>
          </tr>
          <tr>
            <td>图片</td>
            <td>
              <img :src="form.tupian" style="display: ''; max-width: 100px" />
              <input type="file" style="display: ''" id="file" @change="Tupian" />
            </td>
          </tr>
          <tr>
            <td>地址</td>
            <td>
              <input type="text" v-model="form.adder" />
            </td>
          </tr>
          <tr>
            <td>须知</td>
            <td>
              <textarea v-model="form.xuzhi"></textarea>
            </td>
          </tr>
          <tr>
            <td>手机号</td>
            <td>
              <input type="text" v-model="form.phone" />
            </td>
          </tr>
          <tr>
            <td>状态</td>
            <td>
              <input type="radio" v-model="form.start" value="启用" name="start" checked/>启用
              <input type="radio" v-model="form.start" value="停用"   name="start" />停用
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button @click="Add">修改</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from "axios";
  import { onMounted, reactive, ref } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  const router = useRouter();
  const route=useRoute();
  const form: any = reactive({
    id: 0,
    leixing: "",
    biaoti: "",
    tupian: "",
    adder: "",
    xuzhi: "",
    phone: "",
    start: "",
  });
  
  const Add=()=>{
      if(!form.biaoti){
          alert("优惠卷标题不能为空");
          return;
      }
  
      axios.put("https://localhost:7015/api/youhui/Update",form).then(res=>{
          if(res.data>0){
              alert("修改成功");
              router.push("/showyou");
          }
          else
          {
              alert("修改失败");
          }
      })
  
  }
  
  const Tupian=(e:any)=>{
      var formData=new FormData();
      var file=e.target.files[0];
      formData.append("file",file)
      axios.post("https://localhost:7015/api/youhui",formData).then(res=>{
          form.tupian=res.data;
      }).catch(err=>{
          console.log(err);
      })
  }
  

const Fantian=()=>{
    axios.post("https://localhost:7015/api/youhui/youfantian?id="+route.query.id).then(res=>{
        let d=res.data;
        form.id=d.id;
        form.leixing=d.leixing;
        form.biaoti=d.biaoti;
        form.tupian=d.tupian;
        form.adder=d.adder;
        form.xuzhi=d.xuzhi;
        form.phone=d.phone;
        form.start=d.start;
    })
}

onMounted(()=>{
    Fantian();
})
  
  
  
  </script>
  
  <style scoped></style>
  